<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rust语音助手</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/robot.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <div class="robot-container">
        <!-- 顶部导航栏 -->
        <nav class="robot-nav">
            <button class="nav-btn" onclick="window.location.href='/dashboard'">
                <i class="fas fa-arrow-left"></i> 返回问答
            </button>
            <h2 class="nav-title">
                <i class="fas fa-robot"></i> Rust语音助手
            </h2>
            <div class="nav-actions">
                <button class="welcome-btn" id="welcomeBtn" title="播放欢迎语" onclick="window.robotAssistant?.playWelcomeMessage(true)">
                    <i class="fas fa-play-circle"></i>
                    <span class="welcome-label">欢迎语</span>
                </button>
                <button class="tts-toggle-btn" id="ttsToggleBtn" title="语音播报">
                    <i class="fas fa-volume-up"></i>
                    <span class="tts-label">语音播报</span>
                </button>
            </div>
        </nav>

        <!-- 机器人主界面 -->
        <main class="robot-main">
            <!-- 机器人形象区域 -->
            <div class="robot-avatar-section">
                <div class="robot-avatar-container">
                    <div class="robot-avatar">
                        <img src="https://rustacean.net/assets/rustacean-orig-noshadow.svg" 
                             alt="Rust螃蟹" 
                             class="crab-image"
                             id="crabImage"
                             onerror="handleImageError()">
                        <div class="crab-emoji-fallback" style="display: none; font-size: 150px; line-height: 200px; text-align: center;">🦀</div>
                        <div class="pulse-ring"></div>
                        <div class="pulse-ring delay-1"></div>
                        <div class="pulse-ring delay-2"></div>
                    </div>
                    <div class="robot-status" id="robotStatus">
                        <span class="status-text">就绪</span>
                    </div>
                </div>
                
                <!-- 开始对话按钮 -->
                <div class="start-chat-section">
                    <button class="start-chat-btn" id="startChatBtn">
                        <i class="fas fa-comments"></i>
                        <span>开始对话</span>
                    </button>
                </div>
            </div>

            <!-- 对话区域 -->
            <div class="robot-chat-section">
                <div class="chat-messages" id="chatMessages">
                    <!-- 欢迎消息 -->
                    <div class="message robot-message">
                        <div class="message-content">
                            <div class="message-avatar">
                                <i class="fas fa-robot"></i>
                            </div>
                            <div class="message-text">
                                <p>🦀 你好！我是Rust智能助手，你的编程学习伙伴。</p>
                                <p>我可以帮助你：</p>
                                <ul>
                                    <li>解答Rust编程问题</li>
                                    <li>解释Rust概念和语法</li>
                                    <li>提供代码示例和最佳实践</li>
                                    <li>协助调试和错误解决</li>
                                </ul>
                                <p>有什么问题尽管问我吧！</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>

        <!-- 加载动画 -->
        <div class="loading-indicator" id="loadingIndicator" style="display: none;">
            <div class="loading-dots">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </div>

    <!-- JavaScript -->
    <script>
        // 处理图片加载错误
        function handleImageError() {
            const img = document.getElementById('crabImage');
            const fallback = document.querySelector('.crab-emoji-fallback');
            if (img && fallback) {
                img.style.display = 'none';
                fallback.style.display = 'block';
            }
        }
    </script>
    <script src="{{ url_for('static', filename='js/robot.js') }}"></script>
</body>
</html>

